<template>
  <section>
    <div class="info d-flex align-items-center ">
      <div class="flex-1 avator"  @click="$router.push('/users/info')">
        <img src="~assets/img/head.png" alt="" v-if="usersVo.avator == null">
        <img :src="usersVo.avator" alt="" v-else>
        
      </div>
      <div class="flex-2 box d-flex flex-direction-column"  @click="$router.push('/users/info')">
        <h2>{{usersVo.nickName}}</h2>
        <p class="sub_title">点击编辑个人资料 ></p>
      </div>
      <router-link tag="div" to="/user/sign" class="flex-1 sign text-center">
        <h2>签到</h2>
      </router-link>
    </div>
    <ul class="d-flex align-items-center ">
      <li class="flex-1 d-flex flex-direction-column text-center border-right">
        <p>{{usersVo.gold}}</p>
        <h3>金币</h3>
      </li>
      <li class="flex-1 d-flex flex-direction-column text-center border-right">
        <p>{{usersVo.collectionCount}}</p>
        <h3>收藏</h3>
      </li>
      <li class="flex-1 d-flex flex-direction-column text-center border-right">
        <p>{{usersVo.discussCount}}</p>
        <h3>书评</h3>
      </li>
      <!-- <li class="flex-1 d-flex flex-direction-column text-center">
        <p>{{usersVo.isVip == 1 ? usersVo.vipEndDay : 0}}</p>
        <h3>会员天数</h3>
      </li> -->
    </ul>
  </section>
</template>

<script>
import {getUsersForCache} from 'api/UsersApi'

export default {
  name: 'UsersInfo',
  data () {
    return {
      usersVo:{}
    }
  },
  methods: {
    getUsersForCache () {
      getUsersForCache({})
        .then(res => {
          if(res.meta.success) {
            this.usersVo = res.data
          }
        });
    }
  },
  created () {
    this.getUsersForCache();
  }
}
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';
section {
  background: url('~assets/img/background1.png') no-repeat center center;
  height: 30vh;
  overflow hidden

  .info {
    padding-top 5vh
    color: #FFF;
    height: 15vh;

    .avator {
      margin-left 6vw
      
      img {
        width 15vw
        height 15vw
        border-radius 50%
      }
    }

    .box {
      .sub_title {
        font-size 12px
        margin-top 8px
      }
    }

    .sign {
      h2 {
        background rgba(253, 253, 253, 0.23)
        width 50%
        margin 0 auto
        height 24px
        line-height 24px
        padding 0 10px
        border-radius 10px
      }
    }
  }

  ul {
    height 10vh
    color #FFF

    p {
      font-size 18px
    }
    h3 {
      font-size 14px
      margin-top 5px
    }

    li.border-right::before {
      border-right 2px solid #c5c5c5
      height 70%
      top 15%
    }
  }
}

</style>
